<template>
  <div class="change-password">
    <van-nav-bar
      title="修改密码"
      left-arrow
      @click-left="onClickLeft"
      fixed
      placeholder
    />

    <div class="form-container">
      <van-form @submit="onSubmit">
        <van-cell-group inset>
          <van-field
            v-model="oldPassword"
            type="password"
            name="oldPassword"
            label="原密码"
            placeholder="请输入原密码"
            :rules="[{ required: true, message: '请输入原密码' }]"
          />
          <van-field
            v-model="newPassword"
            type="password"
            name="newPassword"
            label="新密码"
            placeholder="请输入新密码"
            :rules="[
              { required: true, message: '请输入新密码' },
              { pattern: /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{6,20}$/, message: '密码必须包含字母和数字，长度6-20位' }
            ]"
          />
          <van-field
            v-model="confirmPassword"
            type="password"
            name="confirmPassword"
            label="确认密码"
            placeholder="请再次输入新密码"
            :rules="[
              { required: true, message: '请确认新密码' },
              { validator: validateConfirmPassword, message: '两次输入的密码不一致' }
            ]"
          />
        </van-cell-group>

        <div class="form-tips">
          <h4>密码要求：</h4>
          <p>1. 长度为6-20个字符</p>
          <p>2. 必须包含字母和数字</p>
          <p>3. 不能与原密码相同</p>
        </div>

        <div class="submit-btn">
          <van-button 
            round 
            block 
            type="primary" 
            native-type="submit"
            :loading="loading"
          >
            {{ loading ? '提交中...' : '确认修改' }}
          </van-button>
        </div>
      </van-form>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { showToast, showDialog } from 'vant'
import { changePassword } from '../api'

const router = useRouter()
const oldPassword = ref('')
const newPassword = ref('')
const confirmPassword = ref('')
const loading = ref(false)

const validateConfirmPassword = (value) => {
  return value === newPassword.value
}

const onSubmit = async (values) => {
  if (newPassword.value === oldPassword.value) {
    showToast('新密码不能与原密码相同')
    return
  }

  try {
    loading.value = true
    await changePassword({
      oldPassword: values.oldPassword,
      newPassword: values.newPassword
    })

    showDialog({
      title: '修改成功',
      message: '密码已修改，请重新登录',
      confirmButtonText: '确定',
      showCancelButton: false
    }).then(() => {
      localStorage.removeItem('token')
      router.replace('/login')
    })
  } catch (error) {
    showToast({
      message: error.message || '修改失败，请重试',
      type: 'fail'
    })
  } finally {
    loading.value = false
  }
}

const onClickLeft = () => {
  router.back()
}
</script>

<style scoped>
.change-password {
  min-height: 100vh;
  background-color: #f7f8fa;
}

.form-container {
  padding: 20px 16px;
}

.form-tips {
  margin: 24px 16px;
  padding: 16px;
  background: #fff;
  border-radius: 8px;
  color: #666;
  font-size: 14px;
  line-height: 1.6;
}

.form-tips h4 {
  margin: 0 0 8px;
  color: #333;
  font-size: 15px;
  font-weight: 500;
}

.form-tips p {
  margin: 4px 0;
}

.submit-btn {
  margin: 32px 16px;
}

:deep(.van-nav-bar) {
  background-color: #fff;
}

:deep(.van-nav-bar__title) {
  color: #323233;
  font-weight: 500;
}

:deep(.van-nav-bar .van-icon) {
  color: #323233;
}

:deep(.van-cell-group) {
  margin: 0;
}

:deep(.van-field) {
  padding: 16px;
}

:deep(.van-button--primary) {
  height: 44px;
  font-size: 16px;
}
</style> 